/* 1.pages下面专门放路由组件，一般组件放在components下
2.通过切换，隐藏的组件实际上默认是被销毁了的,需要的时候再去挂载
3.每个组件都有自己的$route属性，
4.每个组件的$router属性都一样，即:路由可以有多个，但是路由器只有一个 */

<template>
  <h2>我是About的内容</h2>
</template>

<script>
export default {
  name: 'About',
  // 组件内路由守卫，当通过路由进入该组件时候调用此函数
  // 当需要一个组件内配置路由守卫时候用   适合鉴权
  beforeRouteEnter(to, from, next) {
    console.log(from, to);
    if (to.meta.isAuth) {
      if (localStorage.getItem('name') === 'atguigu') {
        next();
      } else {
        alert('you dont have permission');
      }
    } else {
      next();
    }
  },
  //  当通过路由离开该组件时候调用该方法
  beforeRouteLeave(to, from, next) {
    console.log(to, from);
    next();
  },
};
</script>
